<template>
  <view class="order-cell flex-column justify-between">
    <view class="order-cell-title flex-row">
      
      <view class="order-cell-title-img">
        <up-image :src="item.img_url || 'https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/default.png'" :lazy-load="true" width="132rpx" height="132rpx" radius="10">
          <template #error>
            <view style="font-size: 24rpx">暂无图片</view>
          </template>
        </up-image>
      </view>
      <view class="order-cell-title-text">
        <view class="product_name">{{ $ftext(item.name) }}</view>
        <view class="product_pno">{{ $ftext(item.pno) }}</view>
        <view class="product_unit flex-row items-center justify-between">
          <view style="display: flex;flex: 1;width: 100%;">{{$ftext(item.guige)}}</view>
          <Numbox :name="item.id" :unit="item.unit_name" :count="item.count" :min="0" @change="$emit('change', $event)"></Numbox>
        </view>
      </view>
    </view>
    <view class="line" v-if="!noBorderBottom"></view>
  </view>
</template>

<script setup lang="ts">
import Numbox from '@/component/common/numbox/index.vue';
/**
 * @author:  cxy
 * @description 订单出入库确认 cell
 * @param { object} data - 对象{ type: 'loading', message: "加载中"}
 */
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  noBorderBottom: {type: Boolean}
 
});

</script>

<style lang="scss" scope>
.order-cell {
  height: 160rpx;
  flex: 1;
  &-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &-img {
      width: 132rpx;
      height: 132rpx;
    }
    &-text {
      margin-left: 20rpx;
      flex: 1;
      .product_name {
        // height: 36rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #1a1c27;
        line-height: 36rpx;
      }
      .product_pno {
        background: #f5f5f5;
        border-radius: 4rpx;
        height: 32rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #7f7f7f;
        line-height: 32rpx;
        margin-right: 24rpx;
        text-align: center;
        display: inline-block;
        padding: 0 8rpx;
        margin-top: 12rpx;
      }
      .product_unit {
        height: 36rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #7f7f7f;
        line-height: 36rpx;
        margin-top: 12rpx;
      }
    }
  }
  .line {
    height: 2rpx;
    background: #f4f5f8;
    // margin-top: 24rpx;
  }
}
</style>
